<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- 解决逆地理编码，根据经纬度获取地址信息 -->
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '7968bd6ec5188cee37314a6e094739b5', //所申请的安全密钥 注意这是安全密钥而不是key
    }
  </script>
  <!--同步加载AMap-->
  <script
    src='https://webapi.amap.com/maps?v=2.0&key=89dd15568cb3e4f39e5c7e2f2c0e1d38&&plugin=AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.ControlBar,AMap.PlaceSearch,AMap.DistrictSearch,AMap.HeatMap,AMap.3DTilesLayer,AMap.IndoorMap,AMap.MoveAnimation,AMap.ElasticMarker,AMap.MarkerCluster,AMap.IndexCluster,AMap.MouseTool,AMap.BezierCurveEditor,AMap.RectangleEditor,AMap.CircleEditor,AMap.EllipseEditor,AMap.GeoJSON,AMap.PolylineEditor,AMap.PolygonEditor,AMap.AutoComplete,AMap.Driving,AMap.Walking,AMap.Riding,AMap.Transfer,AMap.Geocoder,AMap.GraspRoad,AMap.StationSearch,AMap.LineSearch,AMap.ArrivalRange,AMap.CitySearch,AMap.Geolocation,AMap.Weather,AMap.RangingTool'>
    </script>
  <title>wocwin-admin</title>
  <style>
    html[data-theme=dark] .app-loading {
      background-color: #2c344a
    }

    html[data-theme=dark] .app-loading .app-loading-title {
      color: rgb(255 255 255 / 85%)
    }

    .app-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: #f4f7f9
    }

    .app-loading .app-loading-wrap {
      display: flex;
      position: absolute;
      top: 50%;
      left: 50%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transform: translate3d(-50%, -50%, 0)
    }

    /* .app-loading-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px
    } */

    .app-loading .app-loading-title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      color: rgb(0 0 0 / 85%);
      font-size: 30px
    }

    .app-loading .app-loading-logo {
      display: block;
      width: 90px;
      margin: 0 auto;
      margin-bottom: 20px
    }

    .dot {
      display: inline-block;
      position: relative;
      box-sizing: border-box;
      width: 48px;
      height: 48px;
      margin-top: 30px;
      transform: rotate(45deg);
      animation: ant-rotate 1.2s infinite linear;
      font-size: 32px
    }

    .dot i {
      display: block;
      position: absolute;
      width: 20px;
      height: 20px;
      transform: scale(.75);
      transform-origin: 50% 50%;
      animation: ant-spin-move 1s infinite linear alternate;
      border-radius: 100%;
      opacity: .3;
      background-color: #0065cc
    }

    .dot i:first-child {
      top: 0;
      left: 0
    }

    .dot i:nth-child(2) {
      top: 0;
      right: 0;
      animation-delay: .4s
    }

    .dot i:nth-child(3) {
      right: 0;
      bottom: 0;
      animation-delay: .8s
    }

    .dot i:nth-child(4) {
      bottom: 0;
      left: 0;
      animation-delay: 1.2s
    }

    @keyframes ant-rotate {
      to {
        transform: rotate(405deg)
      }
    }

    @keyframes ant-spin-move {
      to {
        opacity: 1
      }
    }
  </style>
</head>

<body>
  <div id="app">

    <div class="app-loading">
      <div class="app-loading-wrap">
        <img src="./logo.png" class="app-loading-logo" alt="Logo">
        <div class="app-loading-dots"><span class="dot dot-spin"><i></i><i></i><i></i><i></i></span></div>
        <div class="app-loading-title">Wocwin Admin</div>
      </div>
    </div>
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>